<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue Element Example</title>
    <!-- import Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- import Element -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--http 请求-->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app" style="height:100%">
    <div style="height:100%">
        <div style="height:20%">
            <div style="width:10%; left:80% ;top: 10%">
                <el-button type="primary" @click="exit">退出</el-button>
            </div>
        </div>
        <div style="height:10%">
            <div style="width:10%; left:45% ;top: 30%">
                <h1>文件下载</h1>
            </div>
        </div>
        <div style="height:20%">
            <div style="width:40%; left:30% ;top: 30%">
                <el-input style="width:90%" placeholder="https://www.xxx.xxx" v-model="url"></el-input>
                <el-button type="primary" @click="download">下载</el-button>
            </div>
        </div>
        <div style="height:10%; width:40%; left:30% ;">
            <el-progress :text-inside="true" :stroke-width="24" :percentage="progress" status="success"></el-progress>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        methods: {

            download() {
                let _this = this;
                axios.get('/canDownload')
                    .then(function (response) {
                        if (response.data === false) {
                            _this.$message({
                                message: '有其他下载任务暂时无法下载',
                                type: 'warning'
                            });
                        } else {
                            _this.beginDownload();
                        }
                    })
                    .catch(function (error) {
                    });
            },
            beginDownload() {
                let _this=this;
                _this.timer = setInterval(() => {
                    console.log("get progress")
                    _this.getDownloadProgress();
                }, 1000);

                axios.get('/beginDownload?url=' + _this.url)
                    .then(function (response) {

                    })
                    .catch(function (error) {
                    });
            },
            // 开始获取下载进度
            getDownloadProgress() {
                let _this=this;
                axios.get('/getDownloadSize')
                    .then(function (response) {
                        _this.progress = response.data;
                        if(  _this.progress>=99){
                            clearInterval(_this.timer);
                            _this.timer = null;
                            _this.$message({
                                message: '下载完成',
                                type: 'success'
                            });

                        }
                    })
                    .catch(function (error) {
                    });
            },
            exit(){
                axios.get('/exit')
                    .then(function (response) {
                        window.open('about:blank','_self').close()
                    })
                    .catch(function (error) {
                    });
            }

        },

        data: {
            url: 'https://www.xxx.xxx',
            progress: 0,
            timer: null
        }


    })
</script>
<style>
    * {
        margin: 0;
        padding: 0;
        position: relative;

    }

    html {
        height: 100%;
    }

    body {
        height: 100%;
    }
</style>
</body>

</html>
